<!DOCTYPE html>

<html lang = "en" >

<head>
    <title> Friction - Experiment ( demon ) </title>

    <script type = "text/javascript" src = "../../js/general/nav.js" >
    </script>

    <script type = "text/javascript" src = "../../js/set_cookie.js" >
    </script>

    <link rel = 'shortcut icon' href = '../../repository/favicon.ico'>
    <link rel = 'stylesheet' type = 'text/css' href = '../../css/general.css' >
</head>

<body>
    <style type = "text/css" >
        .gameboard
        {
            background-color: #000020 ;
            position: relative ;
        }

        button
        {
            background-color: #FFF ;
            border: solid 1px #000 ;
            position: absolute ;
            transition: all 1s ease-out ;
        }

        button:hover
        {
            margin-top: -20px ;
        }

        #button-1
        {
            height: 33.4px ;
            left: 150px ;
            top: 72.2px ;
            width: 70.3px ; 
        }

        #button-2 
        {
            height: 48px ;
            left: 300px ;
            top: 57.6px ;
            width: 94.7px ;
        }

        #button-3 
        {
            height: 55.6px ;
            left: 450px ;
            top: 50px ;
            width: 107.7px ;
        }

        #record
        {
            height: 50px ;
            left: 300px ;
            opacity: 0 ;
            top: 150px ;
            width: 100px ;
        }

        #record:hover
        {
            margin-top: 0; 
        }

        .result
        {
            background-color: #FFF ;
            color: #FFF ;
            left: 50% ;
            position: absolute ;
            top: 20px ;
        }

        .result th
        {
            background-color: #000020 ;
            border: solid #000020 ;
            padding: 10px ;
        }
    </style>

	<script type = "text/javascript">
        nav ( 2 ) ;
        set_cookie ( 'en' ) ;
    </script>  

    <div class = "gameboard" >
        <canvas id = "game" >
        </canvas>

        <button type = "button" onclick = "set_selector ( 1 ) ;" id = "button-1" >
            0.1 kg 
        </button>

        <button type = "button" onclick = "set_selector ( 2 ) ;" id = "button-2" >
            0.5 kg 
        </button>

        <button type = "button" onclick = "set_selector ( 3 ) ;" id = "button-3" >
            1 kg 
        </button>

        <button type = "button" onclick = "button_click ();" id = "record" >
            Record
        </button>

        <table class = "result" >
            <thead>
                <tr> 
                    <th> # </th>
                    <th> Mass of Block(kg) </th>
                    <th> Height(cm) </th>
                    <th> Gravitational Potential Energy </th>
                    <th> Distance(cm) </th>
                </tr>
            </thead>

            <tbody id = "result" > 
            </tbody>
        </table>
    </div>

    <script type = "text/javascript" src = "../../js/exp/friction.js" >
    </script>
</body>

<footer>
    <script type = "text/javascript" src = "../../js/foot.js" >
    </script>

    <p id = "foot"> Language: </p>

    <select onchange = 'location.href = this.options [ this.selectedIndex ].value' id = "lang" >
        <option value = "" selected = "selected" > English </option>
        <option value = "../../zh-cn/experiment/friction.html" > 中文简体 </option>
        <option value = "../../zh-jyut/experiment/friction.html" > 中文繁體(中國香港及澳門) </option>
        <option value = "../../zh-fan/experiment/friction.html" > 中文繁體(中國臺灣) </option>  
    </select> 
</footer>

</html>